{% extends 'base.html' %}

{% block title %}登录{% endblock %}

{% load static %}
{% block content %}
    <style>
        /* 复用 index.html 的样式 */
        :root {
            --primary-blue: #3F51B5;
            --text-gray: #6D6D6D;
            --accent-yellow: #FFF8E5;
            --accent-purple: #E8E6F9;
        }

        body {
            background: -webkit-linear-gradient(top,
                    #ffffff 0%,
                    #fffede 33%,
                    #cdccff 66%,
                    #524eef 100%);
            background: linear-gradient(to bottom,
                    #ffffff 0%,
                    #fffede 33%,
                    #cdccff 66%,
                    #524eef 100%);
            min-height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .login-container {
            background: rgba(255, 255, 255, 0.9);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }

        .login-container h2 {
            color: var(--primary-blue);
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .login-container form p {
            margin-bottom: 1rem;
        }

        .login-container form p label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-gray);
        }

        .login-container form p input {
            width: 90%;
            padding: 0.8rem;
            border: 2px solid var(--primary-blue);
            border-radius: 0.5rem;
            font-size: 16px;
            color: var(--text-gray);
        }

        .login-container form button {
            background: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 0.5rem;
            padding: 0.8rem 1.5rem;
            font-size: 16px;
            width: 100%;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        .login-container form button:hover {
            opacity: 0.9;
        }

        .login-container p.mt-3 {
            text-align: center;
            margin-top: 1.5rem;
        }

        .login-container p.mt-3 a {
            color: var(--primary-blue);
            text-decoration: none;
        }

        .login-container p.mt-3 a:hover {
            text-decoration: underline;
        }
    </style>

    <div class="login-container">
        <h2>登录</h2>
        <form method="post">
            {% csrf_token %}
            <!-- 用户名输入框 -->
            <p>
                <label for="{{ form.username.id_for_label }}">用户名:</label>
                <input type="text" name="{{ form.username.html_name }}" id="{{ form.username.id_for_label }}" required>
            </p>
            <!-- 密码输入框 -->
            <p>
                <label for="{{ form.password.id_for_label }}">密码:</label>
                <input type="password" name="{{ form.password.html_name }}" id="{{ form.password.id_for_label }}" required>
            </p>
            <!-- 错误信息展示 -->
            {% if form.errors %}
                <p style="color: red;">用户名或密码错误，请重试。</p>
            {% endif %}
            <button type="submit">登录</button>
        </form>
        <p class="mt-3">没有账号？<a href="{% url 'register' %}">注册</a></p>
    </div>
{% endblock %}
